<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="/assets/library/core/css/front.css?v={:rand()}" />
  <script src="/assets/library/layui/layui.js?v={:rand()}"></script>
	<script src="/assets/library/core/core.js?v={:rand()}"></script>
</head>
<style>
    .exam-select-layer-view{background-color:initial;}
    .exam-select-layer-view #workerExam{background-color:#fff; width:210px;}
    .pear-btn{position:relative; front-size:18px;padding-left:20px padding-right:20px;}
</style>
<body>
    <div class="layui-layout-body layui-layout">
        <div class="video layui-layout"></div>
    </div>
    <script>
    layui.use(['jquery', 'layer','element','ckplayer','form','exam'], function() {
        var $ = layui.jquery,ckplayer = layui.ckplayer,form = layui.form,exam = layui.exam;
       
        /*目标题操作 - Id TargetExam */
        exam.initExam({ url:"{:url('target')}?id={$info['id']}",type:'target'})
        /*变式题操作 -- ID variant*/

        /*视频播放 - video*/
        var player=new ckplayer()
            console.log(player);
            player.add("url:{:url('video')}?id={$info['id']}");
            console.log(player);
        /** {notempty name="info.exam"} **/
            const prompts = JSON.parse(`{$info['exam']}`);
            player.time(function(t){
                console.log(player.timeScheduleAdjust);
                prompts.forEach((item,index)=>{

                    
                    if(parseInt(t) == item.times){
                        console.log(t);
                        examSelect(item);
                        player.pause();
                        
                    }
                })
            })
        /** {/notempty}  **/
           
            player.ended(function(t){
                exam.initExam({ url:"{:url('variants')}?id={$info['id']}",type:'variants'});
            })
         window.examSelect = function(data){
            layer.open({
                type: 1,
                title: false, // 禁用标题栏
                closeBtn: false, // 禁用默认关闭按钮
                area: ['320px', '150px'],
                offset:'rb',
                scrollbar: false, // 暂时屏蔽浏览器滚动条
                anim: -1, // 禁用弹出动画
                isOutAnim: false, // 禁用关闭动画
                resize: false,  // 禁用右下角拉伸尺寸
                id: 'exam-select-layer-view',
                skin: 'exam-select-layer-view', // className
                content: ['<div style="padding:15px;display:flex;justify-content: space-around;align-items: center" id="workerExam">','<button class="pear-btn"  plain>A</button>',
                    '<button class="pear-btn "  plain>B</button>','<button class="pear-btn"  plain>C</button>','<button class="pear-btn"  plain>D</button>','</div>'].join(''),
                success: function(layero, index, that){
                    $(document).on('click','#workerExam > .pear-btn',function(){
                        $(this).siblings().removeClass('pear-btn-success pear-btn-danger lay-skin-warning lay-skin-right');
                        if($(this).text() == data.answer){
                            $(this).addClass('pear-btn-success lay-skin-right');
                            setTimeout(() => {
                                player.vars('timeScheduleAdjust','1');
                                player.seek(parseInt(data.times)+1);
                                player.vars('timeScheduleAdjust','5');
                                layer.close(index);
                                
                            }, 800);
                        }else{
                            $(this).addClass('pear-btn-danger lay-skin-warning');
                        }
                    })

                }
            })
         }
        });
        
    </script>
</body>
</html>